import { Component } from "@angular/core";
import { Product } from "../model/product.model";
import { ProductRepository } from "../model/product.repository";
import { Cart } from "../model/cart.model";
import { Router } from "@angular/router";

@Component({
    selector: "store",
    templateUrl: "store.component.html"
})
export class StoreComponent {
    public selectedCategory = null;//选中的类别
    public productsPerPage = 4;//每页产品数
    public selectedPage = 1;//默认第一页

    constructor(private repository: ProductRepository,
        private cart: Cart,
        private router: Router) { }

    get products(): Product[] {
        let pageIndex = (this.selectedPage - 1) * this.productsPerPage;
        return this.repository.getProducts(this.selectedCategory)
            .slice(pageIndex, pageIndex + this.productsPerPage);
    }

    get categories(): string[] {
        return this.repository.getCategories();
    }

    /**
     * 根据传入的类别改变过滤条件
     * @param newCategory 可选，不传的话就是默认值null
     */
    changeCategory(newCategory?: string) {
        this.selectedCategory = newCategory;
    }

    changePage(newPage: number) {
        this.selectedPage = newPage;
    }

    changePageSize(newSize: number) {
        this.productsPerPage = newSize;
        this.changePage(1);
    }

    /**
     * 自定义指令用到这个属性
     */
    get pageCount(): number {
        return Math.ceil(this.repository
            .getProducts(this.selectedCategory).length / this.productsPerPage);
    }
    /**
     * Angular提供的内置ngFor指令有一个限制，它只能为数组或集合中的对象生成内容，
     * 而不能使用计数器。因为我需要生成编号的页面导航按钮，
     * 这意味着我需要创建一个数组，包含我需要的数字
     * 该语句创建了一个新数组，用值0填充它，然后使用map方法生成一个具有数字序列的新数组
     * Math.ceil是进一法取整
     * 换用自定义指令*counter后废弃
     */
    // get pageNumbers(): number[] {
    //     return Array(Math.ceil(this.repository
    //         .getProducts(this.selectedCategory).length / this.productsPerPage))
    //         .fill(0).map((x, i) => i + 1);
    // }

    addProductToCart(product: Product) {
        this.cart.addLine(product);
        this.router.navigateByUrl("/cart");
    }
}